<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <link rel="shortcut icon" href="https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico"
          mce_href="https://img.alicdn.com/tfs/TB1qEwuzrj1gK0jSZFOXXc7GpXa-32-32.ico" type="image/x-icon"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <title>欢迎使用小程序云托管</title>

    <script src="js/jquery-1.11.1.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
        }

        .title-logo {
            width: 459px;
            height: 87px;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        @media screen and (min-width: 1200px) {
            body .container {
                margin-top: 160px;
                margin-bottom: 272px;
            }
        }

        @media screen and (max-width: 1919px) {
            body .container {
                margin-top: 76px;
                margin-bottom: 128px;
            }
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .title {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 320px;
        }

        .title-text {
            width: 320px;
            height: 48px;
            text-align: center;
            margin-top: 16px;
            font-size: 32px;
            opacity: 0.9;
            font-weight: 500;
            color: #000000;
            letter-spacing: 0;
            line-height: 48px;
        }

        .list-text {
            width: 320px;
            height: 16px;
            text-align: center;
            margin-top: 16px;
            font-size: 18px;
            opacity: 0.9;
            font-weight: 500;
            color: #000000;
            letter-spacing: 0;
            line-height: 10px;
        }

        .foot-text {
            width: 320px;
            height: 16px;
            text-align: center;
            margin-top: 16px;
            font-size: 24px;
            opacity: 0.9;
            font-weight: 500;
            color: #000000;
            letter-spacing: 0;
            line-height: 10px;
        }

        .button_test {
            width: 160px;
            height: 30px;
            text-align: center;
            font-size: 12px;
            color: #FFFFFF;
            background-color: #4C9AF7;
            border: none;
            border-radius: 4px;
            margin-top: 4px;
            cursor: pointer;
        }

        .button_add {
            text-align: center;
            font-size: 10px;
            color: #FFFFFF;
            background-color: #4C9AF7;
            border: none;
            border-radius: 4px;
            margin-top: 4px;
            cursor: pointer;
        }

        .button_file {
            text-align: right;
            font-size: 10px;
            color: #FFFFFF;
            background-color: #4C9AF7;
            border: none;
            border-radius: 4px;
            margin-top: 4px;
            cursor: pointer;
        }

        table {
            border-collapse: collapse;
            border: 1px solid #dddddd;
            border-radius: 2px;
            margin-top: 4px;
        }

        table td {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            text-align: center;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 10px;
            padding-right: 10px;
        }

        table th {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            background-color: #83c2fd;
            color: #FFFFFF;
            text-align: center;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 10px;
            padding-right: 10px;
        }

        .id_col {
            width: 20px;
            display: none;
        }

        .record_col {
            width: 100px;
        }

        .dbError {
            color: crimson;
        }

        .redisError {
            color: crimson;
        }

        .ossError {
            color: crimson;
        }

        .testService3 {
            color: chocolate;
        }
    </style>
</head>

<body>
<script>
    function getDateTime() {
        let now = new Date();
        let year = now.getFullYear(); //得到年份
        let month = now.getMonth();//得到月份
        let date = now.getDate();//得到日期
        let day = now.getDay();//得到周几
        let hour = now.getHours();//得到小时
        let minu = now.getMinutes();//得到分钟
        let sec = now.getSeconds();//得到秒
        month = month + 1;
        if (month < 10) month = "0" + month;
        if (date < 10) date = "0" + date;
        if (hour < 10) hour = "0" + hour;
        if (minu < 10) minu = "0" + minu;
        if (sec < 10) sec = "0" + sec;
        var time = "";
        time = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
        return time;
    }

    function testService(flag) {
        $.ajax("/service" + getParams(false), {
            method: "GET",
            contentType: "application/json; charset=utf-8",
        }).done(function (res) {
            if (flag) {
                if ($("#serviceTab").css("display") === "none") {
                    $("#serviceTab").css("display", "block");
                } else {
                    $("#serviceTab").css("display", "none");
                }
            } else {
                $("#serviceTab").css("display", "block");
            }
            let str = "服务接口：/service&返回结果：";
            str = str + res + "&当前时间：" + getDateTime();
            let data = str.split("&");
            let ss = "";
            $("#serviceTab .serviceData").remove();
            for (var i = 0; i < data.length; i++) {
                let strArr = data[i].split("：");
                //拼接表格的行和列
                ss =
                    "<tr class='serviceData'><td class='service_col'>" +
                    strArr[0] +
                    "</td><td class='record_col'>" +
                    strArr[1] +
                    "</td></tr>";
                //追加到table中
                $("#serviceTab").append(ss);
            }
        });
    }

    function testDatabase(flag) {
        $.ajax("/database/getList" + getParams(false), {
            method: "GET",
        }).done(function (res) {
            if (res.success === true && res.data != null) {
                if (flag) {
                    if ($("#tab").css("display") === "none") {
                        $("#tab").css("display", "block");
                    } else {
                        $("#tab").css("display", "none");
                    }
                } else {
                    $("#tab").css("display", "block");
                }
                var data = res.data;
                var str = "";//定义用于拼接的字符串
                $("#tab .appendData").remove();
                for (var i = 0; i < data.length; i++) {
                    //拼接表格的行和列
                    str = "<tr class='appendData'><td class='id_col'>" + data[i].id + "</td><td class='record_col'>" + data[i].record + "</td><td class='record_col'>"
                        + data[i].gmtCreate.replace(/T/g, '  ').substring(0, 20) + "</td><td>" +
                        "<a onclick='testDeleteRecord(" + data[i].id + ")' href='javascript:void(0);'>删除</a></td></tr>";
                    //追加到table中
                    $("#tab").append(str);
                }
            } else {
                $("#dbError").val("数据库异常,请参照项目目录下README.md文件配置数据库")
            }
        });
    }

    function testQueryList(flag) {
        $.ajax("/file/list?folder=/cloudruntest" + getParams(true), {
            method: "GET",
        }).done(function (res) {
            if (res.success === true) {
                if (flag) {
                    if ($("#ossTab").css("display") === "none") {
                        $("#ossTab").css("display", "block");
                    } else {
                        $("#ossTab").css("display", "none");
                    }
                } else {
                    $("#ossTab").css("display", "block");
                }
                var data = res.data;
                var str = "";//定义用于拼接的字符串
                var path = "/cloudruntest";
                $("#ossTab .appendOss").remove();
                for (var i = 0; i < data.length; i++) {
                    //拼接表格的行和列
                    if (data[i].fileType === 'Directory') {
                        continue;
                    }
                    str = "<tr class='appendOss'><td class='id_col'>" + data[i].fileId + "</td><td class='record_col'>" + data[i].fileName + "</td><td>"
                        + data[i].fileType + "</td><td>" +
                        "<a href='javascript:void(0);' onclick=\"testDeleteFile('" + path + "','" + data[i].fileName + "')\">删除</a>" +
                        "<a>&nbsp;</a>" +
                        "<a href='" + data[i].downloadUrl + "'>下载</a></div>" +
                        "</td></tr>";
                    $("#ossTab").append(str);
                }
            } else {
                $("#ossError").val("oss服务异常,请联系云托管运营同学开通oss服务")
            }
        });
    }


    function testUpload() {
        // 阻止表单默认的提交事件
        event.preventDefault();
        // 文件上传的要求数据格式form-data 在js中新建一个FormData的类对象
        // 把上传的文件放入FormData对象中即可
        var formData = new FormData();
        formData.append("file", $("#singleInput")[0].files[0]);
        $.ajax({
            type: "post",  //请求类型
            url: "/file/upload" + getParams(false), //请求后端的地址
            data: formData,  // 向后端发送的数据
            processData: false,//阻止jquery对formData数据进行加工处理
            contentType: false,//阻止jquery修改formData数据的类型
        }).done(function (res) {
            if (res.success === false || res.data === null) {
                $("#ossError").val("数据库异常,请参照项目目录下README.md文件配置数据库")
            }
            testQueryList(false);
        });
    }

    function testDeleteFile(folder, fileName) {
        $.ajax({
            type: "post", // 以post方式发起请求
            contentType: "application/json; charset=utf-8",
            url: "/file/delete?folder=" + folder + "&fileName=" + fileName + getParams(true),
            success(data) {
                if (data.success === false) {
                    $("#ossError").val("oss异常,请参照项目目录下README.md文件配置数据库")
                }
                testQueryList(false);
            }
        })
    }

    function testAddRecord() {
        const record = $("#record").val();
        if (record === null || record === "") {
            testDatabase(false);
            return;
        }
        $.ajax("/database/addRecord" + getParams(false), {
            method: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                "record": $("#record").val()
            })
        }).done(function (res) {
            if (res.success === false) {
                $("#dbError").val("数据库异常,请参照项目目录下README.md文件配置数据库")
            }
            testDatabase(false);
        });
    }

    function testDeleteRecord(id) {
        $.ajax({
            type: "get", // 以get方式发起请求
            contentType: "application/json; charset=utf-8",
            url: "/database/deleteRecord?id=" + id + getParams(true),
            success(data) {
                if (data.success === false || data.data === null) {
                    $("#dbError").val("数据库异常,请参照项目目录下README.md文件配置数据库")
                }
                testDatabase(false);
            }
        })
    }

    function getParams(type) {
        let params = window.location.search;
        if (params == '' || params.indexOf('?') != 0) {
            return '';
        }
        if (type) {
            params = params.replace('?', '&');
        }
        return params;
    }

    function testShowRedis() {
        if (testRedisSet(true)) {
            if ($("#tabRedis").css("display") === "none") {
                $("#tabRedis").css("display", "block");
            } else {
                $("#tabRedis").css("display", "none");
            }
        }
    }

    function testRedisSet(flag) {
        let result = true;
        let key = 'test';
        let value = 'test';
        if (!flag) {
            key = $("#key").val();
            value = $("#value").val();
        }
        $.ajax({
            type: "get", // 以get方式发起请求
            contentType: "application/json; charset=utf-8",
            url: "/redis/set?key=" + key + "&value=" + value + getParams(true),
            async: false,
            success(res) {
                if (!res.success) {
                    $("#redisError").val(
                        "Redis异常,请参照项目目录下README.md文件配置Redis"
                    );
                    $("#value").val("赋值失败");
                    result = false;
                } else {
                    if (!flag) {
                        $("#value").val("赋值成功");
                    }
                }
            },
        });
        return result;
    }

    function testRedisGet() {
        const key = $("#key").val();
        $.ajax({
            type: "get", // 以get方式发起请求
            contentType: "application/json; charset=utf-8",
            url: "/redis/get?key=" + key + getParams(true),
            success(res) {
                if (!res.success) {
                    $("#redisError").val(
                        "Redis异常,请参照项目目录下README.md文件配置Redis"
                    );
                    $("#value").val("取值失败");
                } else if (res.data == null || res.data == '') {
                    $("#value").val("nil");
                } else {
                    $("#value").val(res.data);
                }
            },
        });
    }
</script>

<div class="container">
    <div class="title">
        <img class="title-logo" src="img/logo.png"/>
        <div style="display: inline; margin-bottom: 48px" class="title-text">欢迎使用小程序云托管</div>
    </div>
    <button type="button" onclick="testService(true)" class="button_test">
        测试服务
    </button>
    <div style="width: 100%;display: flex;justify-content: center;">
        <table id="serviceTab" style="display: none;width: 340px;">
            <tr>
                <td colspan="2">
                    <div>
                        <button type="button" onclick="testService(false)" class="button_add">
                            重新查询
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <th style="width: 160px">服务指标</th>
                <th style="width: 180px">指标信息</th>
            </tr>
        </table>
    </div>
    <br/>

    <button type="button" onclick="testDatabase(true)" class="button_test">
        测试数据库访问
    </button>
    <output id="dbError" class="dbError"></output>
    <div style="width: 100%;display: flex;justify-content: center;">
        <table id="tab" style="display: none;width: 340px;">
            <tr>
                <td colspan="4">
                    <div>
                        <input type="text" placeholder="请输入..." id="record"/>
                        <button type="button" onclick="testAddRecord()" class="button_add">
                            插入一条记录
                        </button>
                    </div>
                </td>
            </tr>
            <tr>
                <th hidden="hidden" style="width: 20px">id</th>
                <th style="width: 100px">记录信息</th>
                <th style="width: 180px">创建时间</th>
                <th style="width: 40px">操作</th>
            </tr>
        </table>
    </div>
    <br/>

    <button type="button" onclick="testShowRedis()" class="button_test">
        测试缓存服务
    </button>
    <output id="redisError" class="redisError"></output>
    <div style="width: 100%;display: flex;justify-content: center;">
        <table id="tabRedis" style="display: none; width: 340px;">
            <tr>
                <th style="width: 100px">key</th>
                <th style="width: 180px">value</th>
                <th style="width: 80px">操作</th>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="请输入key..." id="key" width="100px"
                           style="width: 80px !important"/>
                </td>
                <td>
                    <input type="text" placeholder="value..." id="value" width="180px"
                           style="width: 80px !important"/>
                </td>
                <td>
                    <div style="display: flex;">
                        <a onclick='testRedisSet(false)' href='javascript:void(0);'
                           style="width: 40px !important">赋值</a>
                        <a onclick='testRedisGet()' href='javascript:void(0);' style="width: 40px !important">取值</a>
                    </div>

                </td>
            </tr>
        </table>
    </div>
    <br/>

    <button type="button" onclick="testQueryList(true)" class="button_test">
        测试oss服务
    </button>
    <output id="ossError" class="ossError"></output>
    <div style="width: 100%;display: flex;justify-content: center;">
        <table id="ossTab" style="display: none; width: 340px;">
            <tr>
            <tr>
                <td colspan="4">
                    <div>
                        <form id="singleUpload">
                            <input type="file" accept="image/*,.txt" name="file" id="singleInput">
                            <button type="button" onclick="testUpload()" class="button_file">
                                文件上传
                            </button>
                        </form>

                    </div>
                </td>
            </tr>
            <tr>
                <th hidden="hidden" style="width: 20px">id</th>
                <th style="width: 100px !important">文件名</th>
                <th style="width: 160px !important">类型</th>
                <th style="width: 180px !important">操作</th>
            </tr>
        </table>
    </div>
    <br/><br/><br/>
    <span class="foot-text">快速入手</span>
    <hr style="display: block; width: 320px"/>
    <a href="https://opendocs.alipay.com/pre-open/04n0zd" target="_blank">
        开发者文档
    </a>
</div>

</body>

</html>
